<script setup lang="ts">
    const props = defineProps<{
        chartElement: any
    }>();
</script>

<template>
    <div :class="$style.chartElement">
        <div :class="$style.header">
            <div :style="{backgroundColor: '#c9c9c9'}">Chart:</div>
            <div :style="{flexGrow: 1}">{{ props.chartElement.id ?? '-' }}</div>
        </div>

        <div :class="$style.content"></div>
    </div>
</template>

<style module>
.chartElement {
    width: 100%;

    display: flex;
    flex-direction: column;
}

.header {
    display: flex;
}

.header > div {
    padding: 5px;
    border: 1px solid black;
}

.content {
    flex-grow: 1;
    min-height: 50px;
    border: 1px solid black;
}
</style>